<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>多快好省,购物上京东!</title>
    <link rel="icon" type="text/css" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <!-- 引入swipercss文件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- 引入swiper js 文件 -->

    <script src="js/swiper.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <!-- 引入我们自己的js文件 -->
    <script src="js/search.js"></script>
    <script src="js/index.js"></script>

</head>

<body>
    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 布局容器 -->
    <!-- <div class="jdm">
        <!- 顶部搜索 
    <header class="jdm-search">
        <a href="javascript:;" class="logo"></a>
        <div class="search-box">
            <i></i>
            <input type="text" name="" value="" placeholder="100万超级爆品疯抢">
        </div>
        <a href="javascript:;" class="login">登录</a>
    </header> -->
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <input type="text" name="" value="" placeholder="100万超级爆品疯抢">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登陆</div>
    </div>
    <!-- 中间内容 -->
    <div class="jdm-content">
        <!-- 轮播图 -->
        <!-- <div class="slides">
            <ul>
                <li>
                    <a href="javascript:;"><img src="upload/slide_1.jpg" alt=""></a>
                </li>
            </ul>
        </div> -->
        <!-- 滑动图 -->
        <div class="slider">
            <!-- Swiper 注意不要更改里面的结构和类名 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="upload/banner.dpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/banner1.dpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/banner2.dpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/banner3.dpg" alt="">
                    </div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li>
                    <a href="javascript:;"><img src="images/nav_1.png" alt="" /></a>
                    <span>京东超市</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_2.png" alt="" /></a>
                    <span>全球购</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_3.png" alt="" /></a>
                    <span>充值中心</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_4.png" alt="" /></a>
                    <span>服装城</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_5.png" alt="" /></a>
                    <span>理财</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_6.png" alt="" /></a>
                    <span>领券</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_7.png" alt="" /></a>
                    <span>物流查询</span>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/nav_8.png" alt="" /></a>
                    <span>我的关注</span>
                </li>
            </ul>
        </div>
        <!-- 秒杀 -->
        <div class="seckill">
            <div class="seckill-title">
                <h4>掌上秒杀</h4>
                <div class="time">
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                </div>
                <a href="javascript:;">更多秒杀</a>
            </div>
            <div class="seckill-content">
                <ul>
                    <li>
                        <img src="upload/seckill_1.jpg" alt="" />
                        <span>热卖</span>
                        <i>￥79</i>
                        <del>￥138</del>
                    </li>
                    <li>
                        <img src="upload/seckill_2.jpg" alt="" />
                        <span>超值</span>
                        <i>￥169</i>
                        <del>￥238</del>
                    </li>
                    <li>
                        <img src="upload/seckill_3.jpg" alt="" />
                        <span>推荐</span>
                        <i>￥179</i>
                        <del>￥198</del>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 会场 -->
        <!-- <div class="meeting">
            <img src="upload/banner_bg.jpg" alt="">
            <ul>
                <li>
                    <a href="javascript:;"><img src="upload/banner_1.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/banner_2.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/banner_3.jpg" alt="" /></a>
                </li>
            </ul>
        </div> -->
        <!-- 主营业务 -->
        <div class="major">
            <ul>
                <li>
                    <a href="javascript:;"><img src="upload/major_1.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/major_2.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/major_3.jpg" alt="" /></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="javascript:;"><img src="upload/major_4.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/major_5.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/major_6.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/major_7.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
        <!-- 广告1 -->
        <div class="ad">
            <a href="javascript:;"><img src="upload/advert_1.jpg" alt=""></a>
        </div>
        <!-- 特色超市 -->
        <div class="market">
            <div class="market-title">
                <h4>特色超市</h4>
            </div>
            <ul>
                <li>
                    <a href=""><img src="upload/market_1.jpg" alt="" /></a>
                    <a href=""><img src="upload/market_2.jpg" alt="" /></a>
                    <a href=""><img src="upload/market_3.jpg" alt="" /></a>
                </li>
                <li>
                    <a href=""><img src="upload/market_4.jpg" alt="" /></a>
                    <a href=""><img src="upload/market_5.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
        <!-- 广告2 -->
        <div class="ad">
            <a href="javascript:;"><img src="upload/advert_3.jpg" alt=""></a>
        </div>
        <!-- 主题街 -->
        <div class="theme">
            <div class="theme-title">
                <h4>主题街</h4>
            </div>
            <ul>
                <li>
                    <a href="javascript:;"><img src="upload/theme_1.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/theme_2.jpg" alt="" /></a>
                    <a href="javascript:;" class="half"><img src="upload/theme_3.jpg" alt="" /></a>
                    <a href="javascript:;" class="half"><img src="upload/theme_4.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/theme_5.jpg" alt="" /></a>
                    <a href="javascript:;"><img src="upload/theme_6.jpg" alt="" /></a>
                    <a href="javascript:;"><img src="upload/theme_7.jpg" alt="" /></a>
                    <a href="javascript:;"><img src="upload/theme_8.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/theme_9.jpg" alt="" /></a>
                    <a href="javascript:;"><img src="upload/theme_10.jpg" alt="" /></a>
                    <a href="javascript:;"><img src="upload/theme_11.jpg" alt="" /></a>
                    <a href="javascript:;"><img src="upload/theme_12.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
        <!-- 广告3 -->
        <div class="ad">
            <a href="javascript:;"><img src="upload/advert_4.jpg" alt=""></a>
        </div>
        <!-- 品牌推荐 -->
        <div class="brand">
            <div class="brand-title">
                <h4>品牌推荐</h4>
            </div>
            <ul>
                <li>
                    <a href="javascript:;"><img src="upload/brand_1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="upload/brand_2.jpg" alt=""></a>
                    <a href="javascript:;"><img src="upload/brand_3.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <!-- 广告4 -->
        <div class="ad">
            <a href="javascript:;"><img src="upload/advert_7.jpg" alt=""></a>
        </div>
        <!-- 猜你喜欢 -->
        <div class="guess">
            <div class="guess-title">
                <h4>猜你喜欢</h4>
                <a href="javascript:;">登录后更懂你</a>
            </div>
            <div class="guess-content">
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_1.jpg" alt="">
                        </div>
                        <p>曼秀雷敦（Mentholatum）控油抗痘洁面乳150ml（男士洗面奶 洁面 控油）</p>
                    </a>
                    <div class="price">
                        <span>￥25.20</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_2.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_3.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_4.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_5.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_6.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_7.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_8.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_2.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
                <div class="item">
                    <a href="javascript:;">
                        <div class="pic">
                            <img src="upload/item_10.jpg" alt="">
                        </div>
                        <p>Apple iPad Pro平板电脑 9.7 英寸（32G WLAN版/A9X芯片/Retina显示屏/Multi-Touch技术MM172CH）玫瑰金色</p>
                    </a>
                    <div class="price">
                        <span>￥109.00</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 获取更多 -->
        <div class="getmore">
            <a href="javascript:;">点击加载更多</a>
        </div>
        <div class="footer">
            <div class="extra">
                <a href="javascript:;">登录</a>
                <a href="javascript:;">注册</a>
                <a href="javascript:;">反馈</a>
                <a href="javascript:;" class="goTop">回到顶部</a>
            </div>
            <ul>
                <li class="client">
                    <a href="javascript:;">客户端</a>
                </li>
                <li class="touch">
                    <a href="javascript:;">触屏版</a>
                </li>
                <li class="pc">
                    <a href="javascript:;">电脑版</a>
                </li>
            </ul>
            <p>Copyright © 2004-2016 京东JD.com 版权所有</p>
        </div>


    </div>
    <!-- 底部工具栏 -->
    <footer class="jdm-toolbar">
        <ul>
            <li>
                <a href="javascript:;"><img src="images/index-icon.png" alt="" /></a>
            </li>
            <li>
                <a href="sort.html"><img src="images/sort-icon.png" alt="" /></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/618-icon.png" alt="" /></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/cart-icon.png" alt="" /></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/center-icon.png" alt="" /></a>
            </li>
        </ul>
    </footer>



    </div>
</body>

</html>